<template>
  <div class="homepage">
    <!-- 轮播图英雄区域 -->
    <section class="hero-carousel">
      <div class="carousel-container">
        <div class="carousel-slide" :class="{ active: currentSlide === 0 }">
          <div class="slide-content">
            <div class="slide-text">
              <h1>AI深度学习实战课程</h1>
              <p>从零基础到专家级，掌握最前沿的人工智能技术</p>
              <button class="cta-button">立即学习</button>
            </div>
            <div class="slide-image">
              <div class="course-preview">🤖</div>
            </div>
          </div>
        </div>

        <div class="carousel-slide" :class="{ active: currentSlide === 1 }">
          <div class="slide-content">
            <div class="slide-text">
              <h1>大模型应用开发</h1>
              <p>ChatGPT、GPT-4等大模型的实际应用与开发技巧</p>
              <button class="cta-button">开始学习</button>
            </div>
            <div class="slide-image">
              <div class="course-preview">🧠</div>
            </div>
          </div>
        </div>

        <div class="carousel-slide" :class="{ active: currentSlide === 2 }">
          <div class="slide-content">
            <div class="slide-text">
              <h1>计算机视觉专项</h1>
              <p>图像识别、目标检测、深度学习在视觉领域的应用</p>
              <button class="cta-button">立即报名</button>
            </div>
            <div class="slide-image">
              <div class="course-preview">👁️</div>
            </div>
          </div>
        </div>
      </div>

      <div class="carousel-indicators">
        <button
          v-for="(slide, index) in 3"
          :key="index"
          :class="{ active: currentSlide === index }"
          @click="currentSlide = index"
        ></button>
      </div>
    </section>

    <!-- 正在直播 -->
    <section class="section">
      <div class="section-header">
        <h2>🔴 正在直播</h2>
        <button class="more-button">查看更多</button>
      </div>
      <div class="live-courses">
        <div class="live-course featured">
          <div class="live-indicator">
            <span class="live-dot"></span>
            <span>直播中</span>
          </div>
          <div class="course-info">
            <h3>深度学习框架PyTorch实战</h3>
            <p class="instructor">张教授 · AI研究院</p>
            <p class="viewers">1,234人正在观看</p>
            <button class="join-button">加入直播</button>
          </div>
        </div>

        <div class="live-course">
          <div class="live-indicator">
            <span class="live-dot"></span>
            <span>直播中</span>
          </div>
          <div class="course-info">
            <h4>机器学习算法详解</h4>
            <p class="instructor">李博士</p>
            <p class="viewers">856人观看</p>
          </div>
        </div>

        <div class="live-course">
          <div class="live-indicator">
            <span class="live-dot"></span>
            <span>直播中</span>
          </div>
          <div class="course-info">
            <h4>自然语言处理入门</h4>
            <p class="instructor">王老师</p>
            <p class="viewers">623人观看</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 推荐课程 -->
    <section class="section">
      <div class="section-header">
        <h2>为您推荐</h2>
        <button class="more-button">查看更多</button>
      </div>
      <div class="courses-grid">
        <div class="course-card featured-course">
          <div class="course-badge">热门推荐</div>
          <div class="course-content">
            <h3>AI大模型应用开发全栈课程</h3>
            <p class="course-desc">从基础理论到实际项目，全面掌握大模型开发技能</p>
            <div class="course-stats">
              <span>⭐ 4.9</span>
              <span>👥 12,456人学习</span>
              <span>⏱️ 48小时</span>
            </div>
            <div class="course-price">
              <span class="current-price">¥299</span>
              <span class="original-price">¥599</span>
            </div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-content">
            <h4>Python数据科学实战</h4>
            <p class="course-desc">数据分析、可视化、机器学习一站式学习</p>
            <div class="course-stats">
              <span>⭐ 4.8</span>
              <span>👥 8,234人学习</span>
            </div>
            <div class="course-price">¥199</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-content">
            <h4>深度学习与神经网络</h4>
            <p class="course-desc">从感知机到深度神经网络的完整学习路径</p>
            <div class="course-stats">
              <span>⭐ 4.7</span>
              <span>👥 6,789人学习</span>
            </div>
            <div class="course-price">¥249</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-content">
            <h4>计算机视觉OpenCV</h4>
            <p class="course-desc">图像处理、目标检测、人脸识别实战项目</p>
            <div class="course-stats">
              <span>⭐ 4.6</span>
              <span>👥 5,432人学习</span>
            </div>
            <div class="course-price">¥179</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门课程 -->
    <section class="section">
      <div class="section-header">
        <h2>🔥 热门课程</h2>
        <button class="more-button">查看更多</button>
      </div>
      <div class="courses-grid">
        <div class="course-card">
          <div class="course-rank">1</div>
          <div class="course-content">
            <h4>ChatGPT提示工程实战</h4>
            <p class="course-desc">掌握AI对话技巧，提升工作效率</p>
            <div class="course-stats">
              <span>⭐ 4.9</span>
              <span>👥 15,678人学习</span>
            </div>
            <div class="course-price">¥99</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-rank">2</div>
          <div class="course-content">
            <h4>机器学习算法从入门到精通</h4>
            <p class="course-desc">系统学习各种机器学习算法及应用</p>
            <div class="course-stats">
              <span>⭐ 4.8</span>
              <span>👥 13,245人学习</span>
            </div>
            <div class="course-price">¥299</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-rank">3</div>
          <div class="course-content">
            <h4>TensorFlow深度学习实战</h4>
            <p class="course-desc">使用TensorFlow构建深度学习模型</p>
            <div class="course-stats">
              <span>⭐ 4.7</span>
              <span>👥 11,892人学习</span>
            </div>
            <div class="course-price">¥259</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-rank">4</div>
          <div class="course-content">
            <h4>数据结构与算法Python版</h4>
            <p class="course-desc">编程基础必修课，面试求职必备</p>
            <div class="course-stats">
              <span>⭐ 4.6</span>
              <span>👥 9,567人学习</span>
            </div>
            <div class="course-price">¥199</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-rank">5</div>
          <div class="course-content">
            <h4>Web全栈开发React+Node.js</h4>
            <p class="course-desc">前后端全栈开发技能一次掌握</p>
            <div class="course-stats">
              <span>⭐ 4.5</span>
              <span>👥 8,234人学习</span>
            </div>
            <div class="course-price">¥349</div>
          </div>
        </div>

        <div class="course-card">
          <div class="course-rank">6</div>
          <div class="course-content">
            <h4>区块链技术与应用</h4>
            <p class="course-desc">了解区块链原理，掌握智能合约开发</p>
            <div class="course-stats">
              <span>⭐ 4.4</span>
              <span>👥 7,123人学习</span>
            </div>
            <div class="course-price">¥279</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 录播课程分类 -->
    <section class="section">
      <div class="section-header">
        <h2>录播课程</h2>
        <button class="more-button">查看更多</button>
      </div>
      <div class="category-grid">
        <div class="category-card">
          <div class="category-icon">🤖</div>
          <h3>人工智能</h3>
          <p>126门课程</p>
          <div class="category-courses">
            <span>机器学习</span>
            <span>深度学习</span>
            <span>计算机视觉</span>
          </div>
        </div>

        <div class="category-card">
          <div class="category-icon">💻</div>
          <h3>编程开发</h3>
          <p>89门课程</p>
          <div class="category-courses">
            <span>Python</span>
            <span>Java</span>
            <span>前端开发</span>
          </div>
        </div>

        <div class="category-card">
          <div class="category-icon">📊</div>
          <h3>数据科学</h3>
          <p>67门课程</p>
          <div class="category-courses">
            <span>数据分析</span>
            <span>数据挖掘</span>
            <span>统计学</span>
          </div>
        </div>

        <div class="category-card">
          <div class="category-icon">🔒</div>
          <h3>网络安全</h3>
          <p>45门课程</p>
          <div class="category-courses">
            <span>渗透测试</span>
            <span>密码学</span>
            <span>安全防护</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻资讯 -->
    <section class="section">
      <div class="section-header">
        <h2>📰 新闻资讯</h2>
        <button class="more-button">查看更多</button>
      </div>
      <div class="news-grid">
        <div class="news-card featured-news">
          <div class="news-badge">头条</div>
          <h3>OpenAI发布GPT-5，性能提升显著</h3>
          <p>最新的GPT-5模型在多项基准测试中表现出色，推理能力和创造性都有大幅提升...</p>
          <div class="news-meta">
            <span>AI前沿</span>
            <span>2小时前</span>
          </div>
        </div>

        <div class="news-card">
          <h4>谷歌推出新一代AI芯片TPU v5</h4>
          <p>专为大模型训练优化，性能提升3倍</p>
          <div class="news-meta">
            <span>硬件资讯</span>
            <span>5小时前</span>
          </div>
        </div>

        <div class="news-card">
          <h4>Meta开源Llama 3模型</h4>
          <p>支持多语言，性能媲美GPT-4</p>
          <div class="news-meta">
            <span>开源动态</span>
            <span>1天前</span>
          </div>
        </div>

        <div class="news-card">
          <h4>AI在医疗领域的最新突破</h4>
          <p>诊断准确率超过人类专家</p>
          <div class="news-meta">
            <span>应用案例</span>
            <span>2天前</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 论文研究 -->
    <section class="section">
      <div class="section-header">
        <h2>📚 论文研究</h2>
        <button class="more-button">查看更多</button>
      </div>
      <div class="papers-grid">
        <div class="paper-card">
          <div class="paper-badge">Nature</div>
          <h4>Attention Is All You Need</h4>
          <p class="paper-authors">Vaswani et al.</p>
          <p class="paper-abstract">提出了Transformer架构，彻底改变了自然语言处理领域...</p>
          <div class="paper-stats">
            <span>📖 引用: 45,678</span>
            <span>📅 2017</span>
          </div>
        </div>

        <div class="paper-card">
          <div class="paper-badge">ICML</div>
          <h4>BERT: Pre-training of Deep Bidirectional Transformers</h4>
          <p class="paper-authors">Devlin et al.</p>
          <p class="paper-abstract">双向编码器表示，在多项NLP任务上取得突破性进展...</p>
          <div class="paper-stats">
            <span>📖 引用: 32,145</span>
            <span>📅 2018</span>
          </div>
        </div>

        <div class="paper-card">
          <div class="paper-badge">NeurIPS</div>
          <h4>Language Models are Few-Shot Learners</h4>
          <p class="paper-authors">Brown et al.</p>
          <p class="paper-abstract">GPT-3的少样本学习能力展示了大模型的潜力...</p>
          <div class="paper-stats">
            <span>📖 引用: 28,934</span>
            <span>📅 2020</span>
          </div>
        </div>

        <div class="paper-card">
          <div class="paper-badge">Science</div>
          <h4>Mastering the Game of Go with Deep Neural Networks</h4>
          <p class="paper-authors">Silver et al.</p>
          <p class="paper-abstract">AlphaGo通过深度学习和蒙特卡洛树搜索战胜人类冠军...</p>
          <div class="paper-stats">
            <span>📖 引用: 15,678</span>
            <span>📅 2016</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'HomePage',
    data() {
      return {
        currentSlide: 0,
      };
    },
    mounted() {
      // 自动轮播
      setInterval(() => {
        this.currentSlide = (this.currentSlide + 1) % 3;
      }, 5000);
    },
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .homepage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    color: #333;
    background: #fafafa;
  }

  /* 轮播图英雄区域 */
  .hero-carousel {
    position: relative;
    height: 400px;
    margin-bottom: 60px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    padding: 0 60px;
  }

  .carousel-slide.active {
    opacity: 1;
  }

  .slide-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: white;
  }

  .slide-text h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .slide-text p {
    font-size: 1.2rem;
    margin-bottom: 32px;
    opacity: 0.9;
  }

  .cta-button {
    background: white;
    color: #667eea;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .cta-button:hover {
    transform: translateY(-2px);
  }

  .slide-image {
    flex-shrink: 0;
  }

  .course-preview {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    backdrop-filter: blur(10px);
  }

  .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
  }

  .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s;
  }

  .carousel-indicators button.active {
    background: white;
  }

  /* 通用样式 */
  .section {
    margin-bottom: 60px;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
  }

  .section-header h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #2d3748;
  }

  .more-button {
    background: #4299e1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
  }

  .more-button:hover {
    background: #3182ce;
  }

  /* 直播课程 */
  .live-courses {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
  }

  .live-course {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
  }

  .live-course:hover {
    transform: translateY(-4px);
  }

  .live-course.featured {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
  }

  .live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
  }

  .live-dot {
    width: 8px;
    height: 8px;
    background: #ff4757;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  .course-info h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .course-info h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #2d3748;
  }

  .instructor {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
  }

  .live-course:not(.featured) .instructor {
    color: #718096;
  }

  .viewers {
    font-size: 0.9rem;
    margin-bottom: 16px;
  }

  .join-button {
    background: white;
    color: #ff6b6b;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .join-button:hover {
    transform: translateY(-2px);
  }

  /* 课程网格 */
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
  }

  .course-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    position: relative;
  }

  .course-card:hover {
    transform: translateY(-4px);
  }

  .featured-course {
    grid-column: span 2;
    background: linear-gradient(135deg, #4299e1, #3182ce);
    color: white;
  }

  .course-badge {
    position: absolute;
    top: -8px;
    right: 16px;
    background: #f56565;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .course-rank {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 32px;
    height: 32px;
    background: #f56565;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
  }

  .course-content h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }

  .course-content h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #2d3748;
  }

  .course-desc {
    color: #718096;
    margin-bottom: 16px;
    line-height: 1.5;
  }

  .featured-course .course-desc {
    color: rgba(255, 255, 255, 0.8);
  }

  .course-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: #718096;
  }

  .featured-course .course-stats {
    color: rgba(255, 255, 255, 0.8);
  }

  .course-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #4299e1;
  }

  .featured-course .course-price {
    color: white;
  }

  .current-price {
    color: #f56565;
    margin-right: 8px;
  }

  .original-price {
    text-decoration: line-through;
    color: #a0aec0;
    font-size: 1rem;
  }

  /* 分类网格 */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
  }

  .category-card {
    background: white;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
  }

  .category-card:hover {
    transform: translateY(-4px);
  }

  .category-icon {
    font-size: 3rem;
    margin-bottom: 16px;
  }

  .category-card h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: #2d3748;
  }

  .category-card p {
    color: #718096;
    margin-bottom: 16px;
  }

  .category-courses {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .category-courses span {
    background: #edf2f7;
    color: #4a5568;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
  }

  /* 新闻网格 */
  .news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 24px;
  }

  .news-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    position: relative;
  }

  .news-card:hover {
    transform: translateY(-4px);
  }

  .featured-news {
    grid-row: span 2;
  }

  .news-badge {
    position: absolute;
    top: -8px;
    right: 16px;
    background: #f56565;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .news-card h3 {
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: #2d3748;
  }

  .news-card h4 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: #2d3748;
  }

  .news-card p {
    color: #718096;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .news-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: #a0aec0;
  }

  /* 论文网格 */
  .papers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }

  .paper-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    position: relative;
  }

  .paper-card:hover {
    transform: translateY(-4px);
  }

  .paper-badge {
    position: absolute;
    top: -8px;
    right: 16px;
    background: #4299e1;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
  }

  .paper-card h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: #2d3748;
    line-height: 1.3;
  }

  .paper-authors {
    color: #4299e1;
    font-weight: 500;
    margin-bottom: 12px;
  }

  .paper-abstract {
    color: #718096;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .paper-stats {
    display: flex;
    gap: 16px;
    font-size: 0.9rem;
    color: #a0aec0;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .homepage {
      padding: 0 16px;
    }

    .hero-carousel {
      height: 300px;
    }

    .slide-content {
      flex-direction: column;
      text-align: center;
      padding: 0 20px;
    }

    .slide-text h1 {
      font-size: 2rem;
    }

    .live-courses {
      grid-template-columns: 1fr;
    }

    .featured-course {
      grid-column: span 1;
    }

    .news-grid {
      grid-template-columns: 1fr;
    }

    .featured-news {
      grid-row: span 1;
    }
  }
</style>
